<template>
  <div class="xhl-topbar-search">
    <search-component :placeholder="'请选择'" @search="search"></search-component>
    <search-component placeholder="搜索内容" @search="search"></search-component>
    <button class="reset" @click="reset">重置</button>
    <div class="xhl-topbar-operate flexBetweenCenter">
      <div class="leftBox">
        <el-button type="primary" size="small">新增单据</el-button>
        <el-button type="default" size="small" class="is-plain">打印</el-button>
      </div>
      <div class="rightBox">
        <el-tooltip content="刷新" effect="light" placement="top">
          <i class="icon-refresh" @click="handleRefresh"></i>
        </el-tooltip>
        <el-tooltip content="导出" effect="light" placement="top">
          <i class="icon-download" @click="handleExport"></i>
        </el-tooltip>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick">

      <el-table-column prop="date" label="状态" sortable></el-table-column>
      <el-table-column prop="name" label="单据编号" sortable></el-table-column>
      <el-table-column prop="address" label="领用人"></el-table-column>
      <el-table-column prop="date" label="领用部门" sortable></el-table-column>
      <el-table-column prop="name" label="出库仓库" sortable></el-table-column>
      <el-table-column prop="address" label="派发处理人"></el-table-column>
      <el-table-column prop="date" label="派发时间" sortable></el-table-column>
      <el-table-column prop="name" label="备注" sortable></el-table-column>
      <el-table-column prop="address" label="操作"></el-table-column>
  
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalItems">
    </el-pagination>
  </div>
</template>

<script>


export default {

  data() {
    return {
      tableData: [], 
      currentPage: 1, 
      pageSize: 10, 
      totalItems: 0 
    };
  },
  methods: {
    search(query) {
  
    },
    reset() {
  
    },
    handleRefresh() {
   
    },
    handleExport() {

    },
    handleSizeChange(newSize) {

      this.pageSize = newSize;
      this.loadTableData();
    },
    handleCurrentChange(newPage) {
      
      this.currentPage = newPage;
      this.loadTableData();
    },
    handleRowClick(row) {
  
      console.log('Row clicked:', row);
    },
    loadTableData() {
    
    }
  }
};
</script>